<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>项目看板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
    <style>
        .el-card__body{
            display: flex; flex-direction: column; align-items: center;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak class="minWidth">
        <el-form :inline="true" :form="form">
            <el-form-item>
                <el-date-picker v-model.trim="form.Date" type="date" placeholder="请选择日期"  value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSerach">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="dialogVisible=true">导出</el-button>
            </el-form-item>
        </el-form>
        <div>
            <el-row :gutter="20">
                <el-col :span="8" style="width: 33.3%;">
                    <el-card shadow="hover" style="background-color: #fff;">
                        <h3>当日销售额</h3>
                        <span>{{parseFloat(statistics.date).toFixed(2)}}</span>
                    </el-card>
                </el-col>
                <el-col :span="8" style="width: 33.3%;">
                    <el-card shadow="hover" style="background-color: #fff;">
                        <h3>当月销售额:</h3>
                        <span>{{parseFloat(statistics.month).toFixed(2)}}</span>
                    </el-card>
                </el-col>
                <el-col :span="8" style="width: 33.3%;">
                    <el-card shadow="hover" style="background-color: #fff;">
                        <h3>年度销售额:</h3>
                        <span>{{parseFloat(statistics.year).toFixed(2)}}</span>
                    </el-card>
                </el-col>
            </el-row>
            <el-table :data="tableData" stripe border height="calc(100vh - 340px)" style="width: 100%;margin-top: 20px;">
                <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
                <el-table-column align="center" prop="Project_Name" label="项目名称"></el-table-column>
                <el-table-column align="center" prop="Project_Name" label="上架商品数">
                    <template v-slot="{row}">
                        <div style="width: 100%; display: flex; justify-content: space-around;">
                            <span>{{row.total}}</span>
                            <span>日{{row.total2>=0?'↑ ':''}}{{(row.total2*100).toFixed(2).replace('-','↓ ')}}%</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="Department_Name" label="日销售额">
                    <template v-slot="{row}">
                        <div style="width: 100%; display: flex; justify-content: space-around;">
                            <span>{{row.Collection_Amount}}</span>
                            <span>日{{row.Collection_Amount2>=0?'↑ ':''}}{{(row.Collection_Amount2*100).toFixed(2).replace('-','↓ ')}}%</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="Performance_Amount" label="履约金额"></el-table-column>
            </el-table>
            <el-pagination style="margin-top: 5px;" background @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :current-page="form.page" :page-sizes="[15, 30, 50, 100]"
                :page-size="form.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog title="选择" :visible.sync="dialogVisible" width="600px" :close-on-click-modal="false">
            <el-form :form="form1">
                <el-descriptions :column="1" border size="small">
                    <el-descriptions-item label="项目活动">
                        <el-form-item>
                            <el-cascader v-model="form1.value" :options="projectActivity" clearable filterable placeholder="请选择项目活动" collapse-tags style="width: 100%;" :props="{children:'Children', multiple:true}"></el-cascader>
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="分类">
                        <el-form-item>
                            <el-cascader v-model="form1.business_article_classify" clearable placeholder="请选择分类汇总" filterable collapse-tags
                                :props="{ children: 'Children',label: 'Classify_Name', value: 'Classify_SerialNumber', multiple:true}" :options="classify" style="width: 100%"></el-cascader>
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="日期">
                        <el-form-item>
                            <el-date-picker prefix-icon="el-icon-date" v-model="form1.Date" clearable type="datetimerange"
                            value-format="yyyy-MM-dd" format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期"></el-date-picker>
                        </el-form-item>
                    </el-descriptions-item>
                </el-descriptions>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="Export">确 定</el-button>
            </span>
        </el-dialog>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../component/component.js"></script>
    <script type="text/javascript" src="../../../config/config.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.core.min.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

</html>